<template>
	<view style="background: #F1F5FF;height: 100vh;">
		
		<image @click="back" style="height: 48rpx;width: 48rpx;position: absolute;z-index: 10;left: 44rpx;top: 108rpx;" src="../../../static/left-white.png"></image>
		
		<view style="height: 800rpx;width: 750rpx;background: #F1F5FF">
			<image style="height: 800rpx;width: 750rpx;position: absolute;z-index: 0;" src="../../../static/bg2.png">
			</image>
		</view>
		
		<view style="height: 820rpx;width: 100%;padding-left: 24rpx;padding-right: 24rpx;position: relative;top: -358rpx;">
			
			<view class="card">
				<text class="f1">{{test?.title}}</text>
				
				<view style="height: 36rpx;width: 100%;"></view>
			
				<view style="height: 310rpx;width: 652rpx;text-align: left;">
					<text class="f2">尊敬的各位招宣人员：\n
本次考试共28题，请您于4月X号18:00-20:00完成测试。请务必在规定的时间内完成，一旦超时分数记为0。若已知晓上述内容，请开始测试。</text>
				</view>
				
				
			</view>
			
			<view style="height: 22rpx;width: 100%;background: #F1F5FF"></view>
		
			<view style="width: 100%;height: 32rpx;display: flex;background: #F1F5FF">
				<view style="width: 38rpx;height: 100%;background: #F1F5FF"></view>
			
				<image @click="isAccept = false" v-if="isAccept" style="height: 32rpx;width: 32rpx;" src="../../../static/选择(已选).png"></image>
			
				<image @click="isAccept = true" v-if="!isAccept" style="height: 32rpx;width: 32rpx;" src="../../../static/选择(未选).png"></image>
			
				<view style="width: 16rpx;height: 100%;background: #F1F5FF"></view>
			
				<text class="f3">我已知晓上述内容</text>
			</view>
			
			<view style="height: 122rpx;width: 100%;background: #F1F5FF"></view>
			
			
				<button class="btn" @click="handleBeginTest"><view class="f4" style="height: 80rpx;">开始测试</view></button>
		
			
		</view>
		
		
	</view>
	
</template>

<script setup>
import { onMounted,ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

	const isAccept = ref(false)

	const testId = ref();
	onLoad((options) => {
		console.log('接受值:',options);
		testId.value = options.testId;
	})
	
	const test = ref();
	
	function handleBeginTest(){
		if(isAccept.value){
			uni.navigateTo({
				url:`/pages/test/component/testInfoRun?testId=${testId.value}`
			})
		}else{
			uni.showModal({
				title: '请勾选知晓内容！',
				showCancel: false,
			})
		}
	}
	
	onMounted(()=>{
		uni.request({
			url:'/data/test.json',
			data:{testId: testId.value},
			method:'POST',
			success(res) {
				test.value = res.data.at(0)
			}
		})
	})
	
	function back() {
			uni.navigateBack();
	}

</script>

<style scoped>
.card{
	width: 678rpx;
	height: 492rpx;
	background: #FFFFFF;
	border-radius: 24rpx;
	padding-top: 70rpx;
	text-align: center;
	padding-left: 26rpx;

}
.f1{
	font-family: PingFangSC-SNaNpxibold;
	font-weight: 600;
	font-size: 40rpx;
	color: #000000;	
}
.f2{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 32rpx;
	color: #000000;
	line-height: 62rpx;
}
.f3{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #939393;
	letter-spacing: 0;
	text-align: center;
}
.btn{
	width: 686rpx;
	height: 80rpx;
	background: #276EFF;
	border-radius: 16rpx;
	float: left;
	left: 8rpx;
}
.f4{
	font-family: PingFangSC-Medium;
	font-weight: 500;
	font-size: 30rpx;
	color: #FFFFFF;
	letter-spacing: 0;
	line-height: 80rpx;
}
</style>
